<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 个人中心</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
                    },
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, #a742df 0%, #ff7eb3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen pb-16">
    <!-- 页面内容区 -->
    <main class="pb-16 relative">
        <!-- 头部用户信息 -->
        <div class="gradient-bg pt-12 pb-24 px-4">
            <div class="flex items-center">
                <!-- 用户头像 -->
                <div class="w-20 h-20 rounded-full border-2 border-white overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=300&auto=format&fit=crop" 
                         alt="用户头像" class="w-full h-full object-cover">
                </div>
                
                <!-- 用户信息 -->
                <div class="ml-4 text-white">
                    <h2 class="text-xl font-medium mb-1">Sarah 王</h2>
                    <div class="flex items-center">
                        <span class="bg-white bg-opacity-20 text-sm px-2 py-0.5 rounded-full flex items-center">
                            <i class="fa-solid fa-shield-halved mr-1 text-xs"></i>
                            已认证会员
                        </span>
                    </div>
                </div>
                
                <!-- 设置按钮 -->
                <div class="absolute top-4 right-4">
                    <button class="w-8 h-8 flex items-center justify-center text-white">
                        <i class="fa-solid fa-gear text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 个人数据统计 -->
        <div class="bg-white mx-4 rounded-xl shadow-sm absolute top-[11.5rem] left-0 right-0 z-10">
            <div class="p-4">
                <div class="flex justify-around">
                    <div class="flex flex-col items-center">
                        <span class="text-lg font-medium mb-1">32h</span>
                        <span class="text-xs text-gray-500">上课时长</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-lg font-medium mb-1">15</span>
                        <span class="text-xs text-gray-500">预约次数</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 功能模块 -->
        <div class="mt-28">
            <!-- 核销码入口 -->
            <div class="bg-white mx-4 rounded-xl mb-4 overflow-hidden shadow-sm">
                <a href="verification_code.html" class="flex items-center p-4">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-r from-primary-light to-primary-dark flex items-center justify-center">
                        <i class="fa-solid fa-qrcode text-white text-2xl"></i>
                    </div>
                    <div class="ml-4 flex-1">
                        <h3 class="font-medium text-base">我的核销码</h3>
                        <p class="text-xs text-gray-500 mt-1">向教练/空间出示核销码完成签到</p>
                    </div>
                    <i class="fa-solid fa-angle-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 我的订单 -->
            <div class="bg-white mx-4 rounded-xl mb-4 overflow-hidden shadow-sm">
                <div class="p-4 border-b border-gray-50">
                    <div class="flex justify-between items-center">
                        <h3 class="font-medium">我的订单</h3>
                        <a href="order.html" class="text-sm text-gray-500 flex items-center">
                            查看全部
                            <i class="fa-solid fa-angle-right ml-1 text-xs"></i>
                        </a>
                    </div>
                </div>
                <div class="grid grid-cols-4 p-4">
                    <a href="order.html?tab=unpaid" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-wallet text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">待付款</span>
                    </a>
                    <a href="order.html?tab=pending" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-spinner text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">待服务</span>
                    </a>
                    <a href="order.html?tab=reviewing" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-star text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">待评价</span>
                    </a>
                    <a href="order.html?tab=completed" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-check-double text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">已完成</span>
                    </a>
                </div>
            </div>
            
            <!-- 常用功能 -->
            <div class="bg-white mx-4 rounded-xl mb-4 overflow-hidden shadow-sm">
                <div class="p-4 border-b border-gray-50">
                    <h3 class="font-medium">常用功能</h3>
                </div>
                <div class="p-4 grid grid-cols-4 gap-y-4">
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-heart text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">我的收藏</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-comment-dots text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">意见反馈</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-circle-info text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">关于我们</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-headset text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">客服中心</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-share-nodes text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">邀请好友</span>
                    </a>
                    <a href="#" class="flex flex-col items-center">
                        <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mb-2">
                            <i class="fa-solid fa-bell text-primary-dark text-lg"></i>
                        </div>
                        <span class="text-sm">我的消息</span>
                    </a>
                </div>
            </div>
            
            <!-- 教练申请 -->
            <div class="bg-gradient-to-r from-purple-100 to-pink-100 mx-4 rounded-xl mb-4 overflow-hidden shadow-sm">
                <div class="p-4 flex justify-between items-center">
                    <div>
                        <h3 class="font-medium mb-1">成为专业教练</h3>
                        <p class="text-xs text-gray-600">分享您的专业技能，获取更多收入</p>
                    </div>
                    <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                        立即申请
                    </button>
                </div>
            </div>
            
            <!-- 场地入驻 -->
            <div class="bg-gradient-to-r from-purple-100 to-pink-100 mx-4 rounded-xl mb-4 overflow-hidden shadow-sm">
                <div class="p-4 flex justify-between items-center">
                    <div>
                        <h3 class="font-medium mb-1">空间入驻合作</h3>
                        <p class="text-xs text-gray-600">让您的空间获得更多曝光和预约</p>
                    </div>
                    <button class="px-4 py-1.5 gradient-bg text-white rounded-full text-sm">
                        立即申请
                    </button>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 底部导航 -->
    <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-1.5 z-20 max-w-md mx-auto">
        <div class="flex justify-around items-center">
            <a href="index.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-house text-xl mb-0.5"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="coach.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-user-tie text-xl mb-0.5"></i>
                <span class="text-xs">教练</span>
            </a>
            <a href="venue.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-building text-xl mb-0.5"></i>
                <span class="text-xs">空间</span>
            </a>
            <a href="service.html" class="flex flex-col items-center w-1/5 text-gray-500">
                <i class="fa-solid fa-clipboard-list text-xl mb-0.5"></i>
                <span class="text-xs">服务</span>
            </a>
            <a href="#" class="flex flex-col items-center w-1/5 text-primary-dark">
                <i class="fa-solid fa-user text-xl mb-0.5"></i>
                <span class="text-xs font-medium">我的</span>
            </a>
        </div>
    </nav>
</body>
</html> 